/**
 * 倒计时
 */

import useCountDown from "@/hooks/useCountDown";
import { Button, message, Space } from "antd";
import React, { useState } from "react";

const CountDown: React.FC = () => {
  const [, formattedRes] = useCountDown({
    targetDate: "2023-03-25 00:00:00"
  });

  const { days, hours, minutes, seconds } = formattedRes;

  const [count, setCount] = useState<number>();
  const [countdown] = useCountDown({
    targetDate: count,
    onEnd: () => {
      message.info("结束");
    }
  });

  return (
    <div style={{ padding: 20 }}>
      <h3>
        距离2023-03-25 00:00:00还有{days}天{hours}时{minutes}分{seconds}秒
      </h3>
      <p style={{ marginTop: 20 }}>动态变化：</p>
      <Space>
        <Button type="primary" disabled={countdown !== 0} onClick={() => setCount(Date.now() + 3000)}>
          {countdown === 0 ? "开始" : `还有${Math.round(countdown / 1000)}s`}
        </Button>
        <Button danger onClick={() => setCount(undefined)}>
          停止
        </Button>
      </Space>
    </div>
  );
};
export default CountDown;
